<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>公历&阴历选择器</title>
    <meta
      name="viewport"
      content="minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"
    />
    <link rel="stylesheet" type="text/css" href="css/iosSelect.css" />
    <link rel="stylesheet" type="text/css" href="css/current.css" />
  </head>
  <body>
    <div class="data-select">
      <form action="/" method="post" class="form">
        <div class="data-bg">
          <label class="form-item item-line selectDate">
            <div class="pc-box">
              <span data-year="" data-month="" data-date="" class="showDate">请选择(必填)</span>
            </div>
          </label>
        </div>
        <input name="sex" type="hidden" class="sex" value="0" />
        <input type="hidden" name="data-year" class="data-year" value="" />
        <input type="hidden" name="data-month" class="data-month" value="" />
        <input type="hidden" name="data-date" class="data-date" value="" />
        <input type="hidden" name="data-time" class="data-time" value="" />
        <!-- <span class="button" onclick="submit()">获取</span> -->
      </form>
    </div>

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <!-- 公历 & 农历转换（属性&方法） -->
    <script type="text/javascript" src="js/Lunar.js"></script>
    <!-- 一款日历选择插件 -->
    <script type="text/javascript" src="js/calendar.js"></script>
    <!-- h5模拟 ios 选择器插件 -->
    <script type="text/javascript" src="js/iosSelect.js"></script>
    <script type="text/javascript" src="js/jquery-form.js"></script>
    <script type="text/javascript">
      var selectDateType = 1
      var numFlag = '7月'
      var bigNum = '一|二|三|四|五|六|七|八|九|十|冬|腊'
      var showDateDom = $('.showDate')
      var selectDateDom = $('.selectDate')
      var calendarConverter = new Calendar()

      // 将当前时间初始化到选择器中
      let initialDate = new Date()
      console.log(initialDate)
      // 获取日期
      console.log(initialDate.getFullYear())
      console.log(initialDate.getMonth() + 1)
      console.log(initialDate.getDate())

      // 初始化时间
      /*  showDateDom.attr('data-year', 2023)
      showDateDom.attr('data-month', 6)
      showDateDom.attr('data-date', 3)
      showDateDom.attr('data-time', '时间未知') */
      showDateDom.attr('data-year', initialDate.getFullYear())
      showDateDom.attr('data-month', initialDate.getMonth() + 1)
      showDateDom.attr('data-date', initialDate.getDate())
      // showDateDom.attr('data-time', '时间未知')

      //年、月、日、生辰
      var yearData = function (callback) {
        callback(
          selectDateType == 1
            ? calendarConverter.initNormalCalendar()
            : calendarConverter.initLunarCalendar()
        )
      }
      var monthData = function (year, callback) {
        callback(
          selectDateType == 1
            ? calendarConverter.getMonths(year)
            : calendarConverter.getLunarMonths(year)
        )
      }
      var dateData = function (year, month, callback) {
        callback(
          selectDateType == 1
            ? calendarConverter.getDayCount(month)
            : calendarConverter.getLunarDayCount(year, month)
        )
      }
      var timeData = calendarConverter.getTime()

      // 请选择出生日期
      selectDateDom.bind('click', function () {
        initCalendar()
      })

      //创建日期表
      function initCalendar() {
        // 若是农历则转化成阳历
        if (bigNum.indexOf(numFlag.substr(0, 1)) >= 0) {
          var toSolarObj = Lunar.toSolar(
            showDateDom.attr('data-year'),
            showDateDom.attr('data-month'),
            showDateDom.attr('data-date')
          )
          var oneLevelId = toSolarObj[0]
          var twoLevelId = toSolarObj[1]
          var threeLevelId = toSolarObj[2]
          var fourLevelId = showDateDom.attr('data-time')
          // 更新此时状态
          showDateDom.attr('data-year', toSolarObj[0])
          showDateDom.attr('data-month', toSolarObj[1])
          showDateDom.attr('data-date', toSolarObj[2])
          numFlag = toSolarObj[1] + '月'
        } else {
          // 若是阳历则不转化
          var oneLevelId = showDateDom.attr('data-year')
          var twoLevelId = showDateDom.attr('data-month')
          var threeLevelId = showDateDom.attr('data-date')
          var fourLevelId = showDateDom.attr('data-time')
        }
        createCalendar(oneLevelId, twoLevelId, threeLevelId, fourLevelId, 'active')
      }
      // 农历阳历切换
      function changeEvent(obj, num) {
        console.log(obj)
        if (selectDateType == num) return

        selectDateType = num

        // 不能同时存在两个iosselect组件
        $('.olay').remove()

        if (selectDateType == 1) {
          initCalendar()

          $('.' + obj.className)
            .eq(num - 1)
            .addClass('actice')
            .siblings()
            .removeClass('active')
        } else {
          // 若是阳历则转化成农历
          if (bigNum.indexOf(numFlag.substr(0, 1)) < 0) {
            var toLunarObj = Lunar.toLunar(
              showDateDom.attr('data-year'),
              showDateDom.attr('data-month'),
              showDateDom.attr('data-date')
            )
            var oneLevelId = toLunarObj[0]
            var twoLevelId = toLunarObj[1]
            var threeLevelId = toLunarObj[2]
            var fourLevelId = showDateDom.attr('data-time')
            showDateDom.attr('data-year', toLunarObj[0])
            showDateDom.attr('data-month', toLunarObj[1])
            showDateDom.attr('data-date', toLunarObj[2])
            numFlag = toLunarObj[5].substr(-2, 2)
          } else {
            // 若是农历则不转化
            var oneLevelId = showDateDom.attr('data-year')
            var twoLevelId = showDateDom.attr('data-month')
            var threeLevelId = showDateDom.attr('data-date')
            var fourLevelId = showDateDom.attr('data-time')
          }
          // 切换成农历时,需要重新创建组件
          createCalendar(oneLevelId, twoLevelId, threeLevelId, fourLevelId, 'active')
          $('.' + obj.className)
            .eq(num - 1)
            .addClass('active')
            .siblings()
            .removeClass('active')
        }
      }
      // function returnEvent() {
      //   selectDateType = 1
      //   initCalendar()
      //   $('.sure-wrapper').hide()
      // }

      // function sureEvent() {
      //   selectDateType = 1
      //   alert('确认日期')
      // }
      // 获取日历选中的值：表单提交
      // function submit() {
      //   if ($('.showDate').html() == '请选择(必填)') return false
      //   $('.data-year').val(showDateDom.attr('data-year'))
      //   $('.data-month').val(showDateDom.attr('data-month'))
      //   $('.data-data').val(showDateDom.attr('data-data'))
      //   $('.data-time').val(showDateDom.attr('data-time'))
      //   console.log($('.data-year').val())
      //   console.log($('.data-month').val())
      //   console.log($('.data-data').val())
      //   console.log($('.data-year').val())
      //   $('.form').submit()
      // }
      // $('.sex-wrapper').click(function () {
      //   $('.sex').val($('.sex-wrapper').index(this))
      //   $(this).addClass('active').siblings('div').removeClass('active')
      // })
      function createCalendar(oneLevelId, twoLevelId, threeLevelId, fourLevelId, activeClassName) {
        var flag = selectDateType === 1
        var title =
          '<div><span class="' +
          (flag ? activeClassName : '') +
          ' calendar" onclick="changeEvent(this,1)">公历</span><span class="calendar ' +
          (!flag ? activeClassName : '') +
          '" onclick="changeEvent(this,2)">农历</span></div>'
        // 创建组件
        var iosSelect = new IosSelect(4, [yearData, monthData, dateData, timeData], {
          title: title,
          headerHeight: 64,
          itemHeight: 50,
          itemShowCount: 5,
          oneLevelId: oneLevelId,
          twoLevelId: twoLevelId,
          threeLevelId: threeLevelId,
          fourLevelId: fourLevelId,
          callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj) {
            console.log('点击确认按钮后', selectOneObj, selectTwoObj, selectThreeObj, selectFourObj)
            showDateDom.attr('data-year', selectOneObj.id)
            showDateDom.attr('data-month', selectTwoObj.id)
            showDateDom.attr('data-date', selectThreeObj.id)
            showDateDom.attr('data-time', selectFourObj.id)
            $('.sure-wrapper').show()
            if (selectDateType == 1) {
              // 公历 选择后，生成的公历 & 农历日期
              var toLunarObj = Lunar.toLunar(selectOneObj.id, selectTwoObj.id, selectThreeObj.id)
              console.log(
                '公历1',
                selectOneObj.value +
                  selectTwoObj.value +
                  selectThreeObj.value +
                  ' ' +
                  selectFourObj.name
              )
              console.log(
                '农历1',
                toLunarObj[0] + '年' + toLunarObj[5] + toLunarObj[6] + ' ' + selectFourObj.name
              )
            } else {
              // 农历 选择后，生成的公历 & 农历日期
              var toSolarObj = Lunar.toSolar(selectOneObj.id, selectTwoObj.id, selectThreeObj.id)
              $('.lunar-time').html(
                selectOneObj.value +
                  selectTwoObj.value +
                  selectThreeObj.value +
                  ' ' +
                  selectFourObj.name
              )
              console.log(
                '公历2',
                selectOneObj.value +
                  selectTwoObj.value +
                  selectThreeObj.value +
                  ' ' +
                  selectFourObj.name
              )
              $('.solar-time').html(
                toSolarObj[0] +
                  '年' +
                  toSolarObj[1] +
                  '月' +
                  toSolarObj[2] +
                  '日' +
                  ' ' +
                  selectFourObj.name
              )
              console.log(
                '农历2',
                toSolarObj[0] +
                  '年' +
                  toSolarObj[1] +
                  '月' +
                  toSolarObj[2] +
                  '日' +
                  ' ' +
                  selectFourObj.name
              )
            }
            showDateDom.html(
              selectOneObj.value +
                selectTwoObj.value +
                selectThreeObj.value +
                ' ' +
                selectFourObj.name
            )
          },
        })
      }

      // console.log('v.value') 初始&日期变更后执行的回调
    </script>
  </body>
</html>
